<template>
  <div class="wu-page">
    <!-- 表格 -->
    <el-table class="wu-table" :data="userListData">
      <el-table-column prop="id" label="序号" min-width="120" />
      <el-table-column prop="username" label="用户名" min-width="120" />
      <el-table-column prop="roleName" label="角色" min-width="120" />
      <el-table-column prop="phone" label="手机号" min-width="120" />
      <el-table-column prop="createTime" label="创建时间" min-width="170" />
      <el-table-column prop="updateTime" label="更新时间" min-width="170" />
    </el-table>
    <!-- 分页 -->
    <div class="wu-pagination">
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.limit"
        :page-sizes="[5, 10, 50, 100]"
        small
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getUserList } from '@/apis/user'
import { userListItemInt, userListParamsInt } from '@/types/user'

const queryParams = reactive<userListParamsInt>({
  page: 1,
  limit: 10,
  name: '',
  username: ''
})
const pageTotal = ref(0)
// 获取用户列表
const userListData = ref<userListItemInt[]>()
const getUserListFun = async () => {
  const result = await getUserList(queryParams)
  userListData.value = result.data?.records || []
  pageTotal.value = result.data?.total || 0
}
onMounted(() => {
  getUserListFun()
})
const handleSizeChange = (val: number) => {
  queryParams.limit = val
  queryParams.page = 1
  getUserListFun()
}
const handleCurrentChange = (val: number) => {
  queryParams.page = val
  getUserListFun()
}
</script>

<style scoped lang="scss"></style>
